<template>
    <div>
        <div style="height: 0.28rem;"></div>
        <div class="infoTit">
            <div class="infoName"><img src="../../assets/img/infomation/huangguan.png" alt="">{{agentDetail.agentName}}</div>
            <div class="infNum">
                <div class="numFloat">
                    <span>账户余额</span>
                    <p>{{agentDetail.settleBalance}}元</p>
                </div>
                <div class="numRight">
                    <span>可提现余额</span>
                    <p>{{agentDetail.withdrawalBalance}}元</p>
                </div>
            </div>
        </div>
        <div class="infoList">
            <ul>
                <li @click="applyTi">
                   <img class="infoIcon" src="../../assets/img/infomation/tixian.png" alt="">
                    申请提现
                    <img class="infoDetail" src="../../assets/img/infomation/jiantou.png" alt="">
                </li>
                <li @click="goRecord">
                   <img class="infoIcon" src="../../assets/img/infomation/jilu.png" alt="">
                    提现记录
                    <img class="infoDetail" src="../../assets/img/infomation/jiantou.png" alt="">
                </li>
                <li @click="goOrganization">
                   <img class="infoIcon" src="../../assets/img/infomation/jigou.png" alt="">
                    机构信息
                    <img class="infoDetail" src="../../assets/img/infomation/jiantou.png" alt="">
                </li>
                <li @click="goPass">
                   <img class="infoIcon" src="../../assets/img/infomation/mima.png" alt="">
                    修改密码
                    <img class="infoDetail" src="../../assets/img/infomation/jiantou.png" alt="">
                </li>
                <li @click="layout">
                   <img class="infoIcon" src="../../assets/img/infomation/tuichu.png" alt="">
                    退出登录
                    <img class="infoDetail" src="../../assets/img/infomation/jiantou.png" alt="">
                </li>
            </ul>
        </div>
        <!-- 申请提现弹窗 -->
        <div v-if="isShow">
            <div class="win"></div>
            <div class="box">
                <p class="tiTit">提现金额</p>
                <div class="tiNum">
                    <input type="text" v-model="countNum" @keyup="yanzheng">
                    <span>元</span>
                </div>
                <div class="btnBox">
                    <div class="comfim" @click="sureCommit">确认提交</div>
                    <div class="cancal" @click="isShow = false">取消</div>
                </div>
            </div>
        </div>
        <bottomNav :index="5"></bottomNav>
    </div>
</template>
<script>
import bottomNav from '@/components/bottomNav/bottomNav.vue'
import cookie from '@/util/cookie'
export default {
    components: {
        bottomNav
    },
    data() {
        return {
            isShow: false,
            agentDetail: {
                settleBalance: 0,
                withdrawalBalance: 0
            },
            countNum: ''
        }
    },
    mounted () {
        this.getAgentDetail()
    },
    methods: {
        // 获取账户余额
        async getAgentDetail () {
            let res = await this.$store.dispatch('info/GetAgentDetail')
             if (res.status == 200) {
                this.agentDetail = res.data
            }
        },
        applyTi () {
            this.countNum = ''
            // if (this.agentDetail.withdrawalBalance == "0") {
            //     this.$toast('可提现余额不足')
            //     return
            // }
            this.isShow = true
        },
        sureCommit () {
            // if (this.countNum > this.agentDetail.withdrawalBalance) {
            //     this.$toast('可提现余额不足')
            //     return
            // }
            this.$store.dispatch('info/GetCash', {withdrawalAmount: this.countNum}).then(
                async res => {
                    if (res.status == 200) {
                        
                        
                        this.isShow = false
                        await this.getAgentDetail()
                        this.$toast(res.msg)
                    } else {
                        this.$toast(res.msg)
                    }
                }
            )
        },
        yanzheng(){
            if (this.countNum != '' && this.countNum.substr(0, 1) == '.') {
                this.countNum = "";
            }
            this.countNum = this.countNum.replace(/^0*(0\.|[1-9])/, '$1');//粘贴不生效
            this.countNum = this.countNum.replace(/[^\d.]/g, "");  //清除“数字”和“.”以外的字符
            this.countNum = this.countNum.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
            this.countNum = this.countNum.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
            this.countNum = this.countNum.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两个小数
            if (this.countNum.indexOf(".") < 0 && this.countNum != "") {//以上已经过滤，若无小数点，首位不能为类似于 01、02的金额
                if (this.countNum.substr(0, 1) == '0' && this.countNum.length == 2) {
                this.countNum = this.countNum.substr(1, this.countNum.length);
                }
            }
        },
        goRecord(){
            this.$router.push('record')
        },
        goOrganization(){
            this.$router.push('organization')
        },
        goPass(){
            this.$router.push('editPass')
        },
        layout () {
            this.$dialog.confirm({
                title: '提示',
                message: '确定要退出登录吗'
            }).then(
                () => {
                    this.$store.dispatch('info/UserLogout').then(
                        res => {
                            if (res.status == 200) {
                                this.$toast('退出成功')
                                cookie.clear()
                                localStorage.clear()
                                this.$router.push('login')
                            }
                        }
                    )
                }
            )
        }
    },
}
</script>
<style scoped>
.infoTit{
    width: 7rem;
    height: 2.84rem;
    margin: 0 auto;
    background: url('../../assets/img/infomation/infoBk.png') no-repeat center;
    background-size: 7rem 2.84rem;
    overflow: hidden;
}
.infoName{
    color: #fff;
    font-size: 0.36rem;
    margin: 0.47rem;
    margin-bottom: 0.4rem;
}
.infoName img{
    width: 0.5rem;
    height: 0.44rem;
    margin-right: 0.18rem;
    float: left;
}
.numFloat{
    float: left;
    margin-left: 0.65rem;
}
.numFloat span{
    color: #FEFEFE;
    font-size: 0.26rem;
}
.numFloat p{
    color: #FFC24E;
    font-size: 0.36rem;
    margin-top: 0.08rem;
}
.numRight{
    float: right;
    margin-right: 1rem;
}
.numRight span{
    color: #FEFEFE;
    font-size: 0.26rem;
}
.numRight p{
    color: #FFC24E;
    font-size: 0.36rem;
    margin-top: 0.08rem;
}
.infoList li{
    height: 1rem;
    line-height: 1rem;
    margin: 0 0.54rem;
    border-bottom: 1px solid #EEEEEE;
    font-size: 0.28rem;
}
.infoIcon{
    width: 0.32rem;
    height: 0.34rem;
    float: left;
    margin-top: 0.28rem;
    margin-right: 0.2rem;
}
.infoDetail{
    width: 0.1rem;
    height: 0.18rem;
    float: right;
     margin-top: 0.4rem;
}
/* ==================================== */
.win{
    position: fixed;
        top:0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
        width: 100%;
        height: 100%;
        z-index: 100;
        display: flex;
        align-items: center;
        padding: 0 0.32rem;
        box-sizing: border-box;
}
.box{
        width: 6rem;
        height: 4.1rem;
        border-radius: 0.15rem;
        background: #fff;
        position: absolute;
        top: 3rem;
        left: 0.6rem;
        overflow: auto;
        z-index: 102;
    }
.tiTit{
    margin-top: 0.44rem;
    margin-left: 0.46rem;
    color: #010101;
    font-size: 0.32rem;
    font-weight: bold;
}
.tiNum{
    margin-top: 0.6rem;
} 
.tiNum input{
    width: 3.42rem;
    height: 0.72rem;
    background: #EEF0F2;
    border-radius: 0.10rem;
    margin-left: 1rem;
    text-align: right;
    padding-right: 0.18rem;
    font-size: 0.32rem;
}
.tiNum span{
    font-size: 0.32rem;
    margin-left: 0.14rem;
}
.btnBox{
    text-align: center;
    margin-top: 0.6rem;
}
.comfim{
    width: 2.30rem;
    height: 0.76rem;
    line-height: 0.76rem;
    background: #4B7BF9;
    border-radius: 0.38rem;
    color: #fff;
    font-size: 0.3rem;
    text-align: center;
    display: inline-block;
}
.cancal{
    width: 2.30rem;
    height: 0.76rem;
    line-height: 0.76rem;
    background: #fff;
    border: 1px solid  #4B7BF9;
    border-radius: 0.38rem;
    color: #4B7BF9;
    font-size: 0.3rem;
    text-align: center;
    display: inline-block;
    margin-left: 0.5rem;
}
</style>